<template>
  <block>
    <div class="block-content">
      <div class="top">
        <div class="title">
          市民
        </div>
        <!-- <el-button-group>
          <el-button
            v-for="item in citizenBtnMap"
            :key="item.key"
            size="mini"
            :class="{ active: status === item.key }"
            @click="handleClick(item.key)"
          >
            {{ item.value }}
          </el-button>
        </el-button-group> -->
      </div>
      <div class="middle">
        <template v-if="status === 1">
          <div class="title">
            注册总数: 36781
          </div>
          <v-chart :options="options" />
        </template>
        <v-chart v-if="status === 2" :options="investOptions" />
      </div>
    </div>
  </block>
</template>

<script>
import 'echarts/lib/chart/pie'
import { Block } from './index'
import { citizenBtnMap, citizenOptionFn } from '../config'

export default {
  name: 'CitizenBlock',
  components: { Block },
  data() {
    return {
      citizenBtnMap,

      options: {},
      investOptions: {},

      styles: {
        margin: 'auto'
      },

      status: 1
    }
  },
  created() {
    this._createOption()
  },
  methods: {
    handleClick(key) {
      // 市民按钮点击
      this.status = key
    },

    _createOption() {
      // 创建市民图表
      const values = [
        { name: '裁判员', value: '25', count: 787 },
        { name: '传感器', value: '30', count: 900 },
        { name: '股东', value: '45', count: 3978 }
      ]
      this.options = citizenOptionFn(values)
    }
  }
}
</script>

<style lang="scss" scoped>
.middle {
  .title {
    height: 15px;
    font-size: 12px;
    letter-spacing: 0px;
    color: #65c6e7 * 0.9;
    margin-top: 20px;
  }
}
.echarts {
  width: 100%;
  height: 180px;
}
</style>
